<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.js"></script>
</head>
<body>
<h1>The Jquery Ajax 01 Page</h1>
<div>
    <button onclick="doAjax()">$.ajax(...)</button>
    <button onclick="doAjaxPost()">$.post(...)</button>
    <button onclick="doAjaxGet()">$.get(...)</button>
    <button onclick="doAjaxLoad()">$("..").load(...)</button>
</div>
<div id="result"></div>
<script>

    function doAjaxLoad() {
        let url ="/doAjaxGet";
        $("#result").load(url,function () {
            console.log("load complete");
        });

    }
    function doAjaxGet() {
        //1.定义url
        let url = "/doAjaxGet";
        //2.定义请求参数
        let params = "";
        //3.发送异步请求（底层会借助XMLHTTPRequest对象）
        $.get(url,params,function (result) {
            // debugger
            console.log("result",result)
            $("#result").html(result);
        },"text");//json--text
    }
    function doAjaxPost() {
        //1.定义url
        let url = "/doAjaxPost";
        //2.定义请求参数
        let params = "id=200&name=oppo&remark=very good";
        //3.发送异步请求（底层会借助XMLHTTPRequest对象）
        $.post(url,params,function (result) {
           // debugger
            $("#result").html(result);
        });
    }
    function doAjax() {
        //1.定义url
        let url = "/doAjaxPost";
        //2.定义请求参数
        let params = "id=200&name=oppo&remark=very good";

        //3.发送异步请求（底层会借助XMLHTTPRequest对象）
        $.ajax({
            type:"POST",
            url:url,
            data:params,
            success:function (result) {
                $("#result").html(result);
            }
        })
    }
</script>
</body>
</html>